<template>
  <div class="login-box">
    <!-- 登录LOGO -->
    <div class="login-logo">
      <img src="../../assets/img/logo1.jpg" alt="logo文件加载失败"/>
      <b>桥梁数据中心</b>
    </div>
    <!--登录表单-->
    <div class="login-box-body" v-loading="isLogin">
      <!--登录信息提示-->
      <p class="login-box-msg" style="color: red" v-if="statusText">{{statusText}}</p>
      <!--  登录表单 -->
      <div class="form-group has-feedback">
        <input v-model="form.account" class="form-control" placeholder="账号">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input v-model="form.password" type="password" class="form-control" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div>
        <button class="btn btn-primary btn-block btn-flat" @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {doPost} from "../../assets/js/utils/RequestUtils.js"
  import {LOGIN} from "../../store/mutationTypes.js"

  export default {
    name:"AppLogin",
    data() {
      return {
        form:{
          account:"",
          password:""
        },
        //反馈的登录状态文字
        statusText:"",
        //登录框的按钮是否显示进度
        isLogin: false
      }
    },
    methods:{
      login() {
        this.isLogin = true;
        this.statusText = "";

        doPost("/user/login", {
          data:this.form
        })
          .then(response=>{
            if(response.status === "SUCCESS") {
              //存入token
              localStorage.setItem("tokenId", response.content.id);
              this.$store.commit(LOGIN, response.content);
              this.$router.replace("/");
              // this.$router.replace("/");
            } else {
              this.statusText = response.message;
            }
          })
          .catch(error=>this.statusText = "网络错误，请稍后重试")
          .finally(()=>this.isLogin = false);
      }
    },
    created() {
      document.body.className = "hold-transition login-page";
    }
  }
</script>

<style scoped>
  .login-logo img {
    width: 70px;
    margin:auto 5px;
  }

  .login-logo {
    font-size: 2.5em;
    color: #111111;
  }
</style>



// WEBPACK FOOTER //
// LoginPage.vue?81e14aca
